<template>
    <view class="nav-box" :style="{ height: height + 'px', background: bgColor }">
        <!-- 状态栏占位 -->
        <view class="status_bar" :style="{ height: statusBarHeight + 'px' }"></view>
        <!-- 导航内容 -->
        <view class="nav-main" :style="{ height: navBarHeight + 'px' }">
            <!-- 回退图标 -->
            <!-- <image v-if="backIcon" :src="IMG_URL2+'inventory/chevron-left.svg'" class="back" @click="back(path)" /> -->
            <!-- 标题 -->
            <!-- <text class="nav-main-title">{{ title }}</text> -->
            <slot name="left"></slot>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted, defineProps, defineEmits } from "vue";

// 接收父组件传值
const props = defineProps({
    bgColor: { type: String, default: "#F5F5F5" },
    backIcon: { type: Boolean, default: true },
    title: { type: String, default: "我的" },
    path: { type: String, default: "" },
});

// 子传父事件
const emit = defineEmits(["getHeadHeight"]);

// 响应式数据
const height = ref(0);
const statusBarHeight = ref(0);
const navBarHeight = ref(0);
const menuButtonRect = ref({});

// 计算导航栏高度
const getHeight = () => {
    const sysInfo = uni.getSystemInfoSync();
    statusBarHeight.value = sysInfo.statusBarHeight;

    if (uni.canIUse("getMenuButtonBoundingClientRect")) {
        const rect = uni.getMenuButtonBoundingClientRect();
        menuButtonRect.value = { ...rect };

        // 计算导航栏高度
        const navHeight = (rect.top - sysInfo.statusBarHeight) * 2 + rect.height;
        navBarHeight.value = navHeight;
        height.value = sysInfo.statusBarHeight + navHeight;
    } else {
        uni.showToast({
            title: "您的微信版本过低，界面可能会显示不正常",
            icon: "none",
            duration: 4000,
        });
    }
};

// 返回上一级
const back = (path) => {
    if (path) {
        uni.navigateTo({ url: path });
    } else {
        uni.navigateBack();
    }
};

// 初始化计算导航栏高度
onMounted(() => {
    getHeight();
    emit("getHeadHeight", height.value);
});
</script>

<style lang="scss" scoped>
.nav-box{
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
}
.status_bar {
    width: 100%;
}

.nav-main {
    display: flex;
    align-items: center;
    padding: 0 40rpx 0 20rpx;
    box-sizing: border-box;
    .back {
        width: 50rpx;
        height: 50rpx;
        margin-right: 20rpx;
    }

    .nav-main-title {
        color: rgba(0, 0, 0, 0.9);
        font-size: 32rpx;
    }
}
</style>